<template>
	<view class="volunteerProfile">
		<view class="line">
			<view>我的中茶</view>
			<view class="right">
				<input type="number" v-model="info.nowTea"  disabled="true" />
			</view>
		</view>
		<view class="line">
			<view>中茶大盘价格</view>
			<view class="right">
				<input type="number" v-model="info.price"  disabled="true" />
			</view>
		</view>
		<view class="line">
			<view>均价（g）</view>
			<view class="right">
				<input type="number" v-model="info.averagePrice"  disabled="true" />
			</view>
		</view>
		<view class="downItem line">
			<view>需求类型</view>
			<div class="A" v-for="(typeItem,index) in typeList" :key="index">
			  <p @click="selAnswerFun(index)">
			    <i :class="(isCheck(index) ? 'check ' : '') + 'radio'"></i>
			    <span>{{typeItem.itemName}}</span>
			  </p>
			</div>
		</view>
		<view class="line">
			<view>需求数量</view>
			<view class="right">
				<input type="number" v-model="formData.num" @blur="handleInput"  data-type="1" maxlength="6" @change="calculationTotalMoney()"/>
			</view>
		</view>
		<view class="line">
			<view>价格</view>
			<view class="right">
				<input type="number" v-model="formData.price" @input="handleInput" @change="calculationTotalMoney()" maxlength="6" data-type="2"/>
			</view>
		</view>
		<view class="line">
			<view>总金额</view>
			<view class="right">
				{{totalMoney}}
			</view>
		</view>
		
		<view class="bottom" @click="subForm()" >发布</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				typeList: [
					{itemName: '买入', itemVal: 1},
					{itemName: '卖出', itemVal: 2},
				],
				info: {
					status : 0,
					price : '-',
					nowTea : 0,
					averagePrice: 0,
				},
				totalMoney: 0,
				isSub: true,
				formData:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 1,
					num: 0,
					price: 0,
				},
			}
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/tea/index/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					uni.hideLoading();
					this.info = res.data;
				});
			},
			isCheck(index) {
				let typeItem = this.typeList[index];
				return typeItem.itemVal == this.formData.type;
			},
			selAnswerFun(index) {
				let typeItem = this.typeList[index];
				this.formData.type = typeItem.itemVal;
			},
			subForm() {
				if(!this.formData.num || this.formData.num == 0) {
					uni.showModal({
						title: '提示',
						content: '数量必须为正整数',
						showCancel: false,
					});
					return ;
				}
				let numArr = this.formData.num.split(".");
				if(numArr.length == 2 && numArr[1] > 0) {
					uni.showModal({
						title: '提示',
						content: '数量必须为正整数',
						showCancel: false,
					});
					return ;
				}
				if(!this.formData.price || this.formData.price == 0) {
					uni.showModal({
						title: '提示',
						content: '价格必须大于零',
						showCancel: false,
					});
					return ;
				}
				if(this.formData.type == 2 && Number(this.formData.num) > Number(this.info.nowTea)) {
					uni.showModal({
						title: '提示',
						content: '卖出数量不能大于拥有数量',
						showCancel: false,
					});
					return ;
				}
				if(!this.isSub) {
					return ;
				}
				this.isSub = false;
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				var self = this;
				serve.request({
					url: '/tea/trade/apply',
					data: self.formData
				}).then(res => {
					self.$forceUpdate();
					let code = res.code;
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function(res) {
							if (res.confirm && code == 200) {
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
					self.isSub = true;
					return ;
				});
			},
			handleInput(e) {
				return ;
				let type = e.currentTarget.dataset.type;
				let val = e.target.value;
				// val = val.replace(/[^\d]/g,""); 
				// console.info(val);
				// val = val.replace(/^\./g,""); 
				// val = val.replace(/\.{2,}/g,"."); 
				// val = val.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
				// val = val.replace(/[^\d]/g,""); 
				// console.info(val);
				// val = val.replace(/^./g, "");
				// console.info(val);
				// val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
				// console.info(val);
				// val = val.replace(/.{2,}/g, "."); //只保留第一个. 清除多余的
				// console.info(val);
				// val = val.replace(/^0+./g, "0.");
				// console.info(val);
				// val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, "")) : val;
				// console.info(val);
				// val = val.match(/^\d*(.?\d{0,2})/g)[0] || "";
				// console.info(val);
				if(type == 1) {
					val = val.replace(/^(\-)*(\d+)\.*$/,'$1$2');
					this.formData.num = val;
				} else {
					val = val.replace(/^(\-)*(\d+)\.*$/,'$1$2.$3');
					this.formData.price = val;
				}
			},
			calculationTotalMoney(){
				let tm  = 0;
				if(this.formData.num == 0 || this.formData.price == 0) {
					this.totalMoney = parseFloat(tm).toFixed(2);
					this.$forceUpdate();
					return ;
				}
				let numArr = this.formData.num.split(".");
				console.info(numArr);
				if(numArr.length > 2 || (numArr.length == 2 && numArr[1] > 0)) {
					uni.showModal({
						title: '提示',
						content: '数量必须为正整数',
						showCancel: false,
					});
					this.totalMoney = parseFloat(tm).toFixed(2);
					this.$forceUpdate();
					return ;
				}
				let priceArr = this.formData.price.split(".");
				if(priceArr.length > 2 || (numArr.length == 2 && numArr[1] > 0)) {
					uni.showModal({
						title: '提示',
						content: '价格必须为数字',
						showCancel: false,
					});
					this.totalMoney = parseFloat(tm).toFixed(2);
					this.$forceUpdate();
					return ;
				}
				tm = Number(this.formData.num) * Number(this.formData.price);
				this.totalMoney = parseFloat(tm).toFixed(2);
				this.$forceUpdate();
			}
		},
		onLoad(options) {
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.volunteerProfile{
		padding-bottom: 100rpx;
		.bottom {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 1);
			background: rgba(251, 202, 63, 1);
			bottom: 0rpx;
			position: fixed;
			z-index: 999;
		}
		.speciality{
			padding: 42rpx 30rpx 25rpx;
			box-sizing: border-box;
			textarea{
				padding: 33rpx 38rpx;
				background:rgba(232,232,232,0.2);
				border-radius:12px;
				font-size:32rpx;
				// color:rgba(66,81,114,0.2);
				height:240rpx;
			}
		}
		.photo{
			padding: 44rpx 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx rgba(235,235,235,1) solid;
			position: relative;

			.title{
				font-size:32rpx;
				color:rgba(153,153,153,1);
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				image{
					margin-top: 40rpx;
					margin-right: 20rpx;
					width:200rpx;
					height:200rpx;
				}
				.del{
					width: 48rpx !important;
					position: absolute;
					height: 48rpx !important;
					top: -24rpx;
					right: -24rpx;
				}
				.photos{
					box-sizing: border-box;
					padding: 30rpx 30rpx;
					display: flex;
					flex-wrap: wrap;
					image{
						width:200rpx;
						height:200rpx;
						border-radius:10rpx;
						margin-bottom: 20rpx;
					}
					.photo_list{
						margin-right: 30rpx;
						padding-bottom: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						position: relative;
						view{
							color: red;
							font-size: 30rpx;
						}
						.del{
							width: 48rpx !important;
							position: absolute;
							height: 48rpx !important;
							top: -24rpx;
							right: -24rpx;
						}
					}
				}
			}
		}
		.downItem{
			height: 100% !important;
			display: list-item !important;
			line-height: 80rpx !important;
		}
		.required{
			color: #f00;
		}
		
		.line {
				height: 130rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 30rpx;
				color:rgba(153,153,153,0.9);
				font-size: 32rpx;
				border-bottom: 1rpx rgba(235,235,235,1) solid;
				
				.right {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
		
					.item {
						margin-right: 30rpx;
					}
					input{
						text-align: right;
					}
		
					.jt {
						position: absolute;
						right: 0rpx;
						top: 62rpx;
						content: '';
						border: 1rpx solid rgba(57, 72, 107, 0.5);
						border-width: 0 3rpx 3rpx 0;
						padding: 6rpx;
						transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
					}
				}
				.A {
					height: 70rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0rpx 30rpx;
					color:rgba(153,153,153,0.9);
					font-size: 32rpx;
					
					p {
						display: flex;
						align-items: center;
						line-height: 48rpx;
						font-size: 32rpx;
						color: rgba(60, 72, 104, 1);
						margin-bottom: 35rpx;
				
						.radio {
							display: block;
							width: 48rpx;
							height: 48rpx;
							border: 1px solid rgba(57, 72, 107, 1);
							border-radius: 50%;
							box-sizing: border-box;
							margin-right: 10rpx;
						}
					   .checkbox {
							width: 40rpx;
							height: 40rpx;
							line-height: 60rpx;
							text-align: center;
							margin: 0 10rpx;
							border: 2rpx solid #888;
							color: #999;
							font-size: 28rpx;  
						}
						.radio.check {
							border: none;
							background: url(http://hdsq.aoorange.cn/attachment/xcx/my/check.png);
							background-size: 100% auto;
						}
						.checkbox.check {
							border: none;
							background: url(http://hdsq.aoorange.cn/attachment/xcx/my/checkbox_check.png);
							background-size: 100% auto;
						}
					}
				}
			}
	}
</style>
